<template>
  <div class="electronicFilm_wrapper">
    <child-header :title="title"></child-header>
    <section class="electronicFilm_content p_t_82">
      <div id="imgBox" ref="imgBox" style="background-color: rgba(0, 0, 0, .5);">
        <div id="dwv">
          <div class="layerContainer">
               <div class="dropBox"></div>
               <canvas
                  style="position:absolute;top:0;left:0"
                  ref="dwvsCanvas"
                  class="imageLayer"
                >仅适用于兼容HTML5的浏览器……</canvas>
                 <div
                  class="drawDiv"
                  ref="drawDiv"
                ></div>
          </div>
        </div>
      </div>
      <div class="imageBrowsing_content_fixed_warpper">
        <div>
          <div ref="tcSfPathWarpper">
            <div @click="jpgToBase64(item.TC_IMG_JPG_FIELD,index)" ref="tcSfPath" class="m_l_3" :class="{acImg: acImgList=== index}"
              v-for="(item ,index) in getPhotoList" :key="index">
              <img :src="item.getSmallFilePath" alt>
            </div>
          </div>
        </div>
        <div>
          <section class="bottom_nav">
            <div @click="triggerHandleType(0)" class="border_r_1" :class="{ac: 0== bottomNavAc}">
              <img src="@/assets/images/1.png" alt>
            </div>
            <div @click="triggerHandleType(1)" class="border_r_1" :class="{ac: 1== bottomNavAc}">
              <img src="@/assets/images/2.png" alt>
            </div>
            <div @click="triggerHandleType(2)" class="border_r_1" :class="{ac: 2== bottomNavAc}">
              <img src="@/assets/images/3.png" alt>
            </div>
            <div @click="triggerHandleType(3)" :class="{ac: 3== bottomNavAc}">
              <img src="@/assets/images/4.png" alt>
            </div>
          </section>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import Dwv from "@/bin/dwv";
  let dwv = Dwv.getDwv();
  import img_code1 from "@/assets/images/QQtest.jpg";
  import {
    HttpService
  } from "../../provides/index";
  import {
    fx
  } from "../../bin/glfx.js";
  import "viewerjs/dist/viewer.css";
  export default {
    components: {},
    props: {},
    data() {
      return {
        isLoading:false,
        img_code1: img_code1,
        istouch: false,
        acImgList: 0, //默认选中第一张缩略图
        title: "电子胶片",
        filmId: "",
        params: {},
        getPhotoList: [],
        imgPath: '1',
        drawFlag: false,
        _canvas: "",
        _draw: "",
        imgElement: '',
        brighNum: 0,
        contrastNum: 0,
        filmId: "",
        transformAcNum: 0,
        resX: 0,
        resY: 0,
        leftShowIndex: 0,
        dwv:null,
        bottomNavAc: 0, //底部导航是否选中
        selfNum:0,
      };
    },
    watch: {},
    computed: {},
    methods: {
      changeDraw(ev) {
        if (this.drawFlag) {
          this.resX = ev.touches[0].clientX;
          this.resY = ev.touches[0].clientY;
          // window.addEventListener('touchmove',_this.moveClient(resX,resY,ev),false)
          this.ontouchmove = function (ev) {};
        } else return;
      },

      moveClient(ev) {
        // console.log('双指moveClient' + this.$refs.imgMark.style.pointerEvents);
        if (this.drawFlag) {
          var cX = ev.touches[0].clientX;
          var cY = ev.touches[0].clientY;
          // console.log(cX);

          if (cX - this.resX < 0) {
            this.brighNum = this.brighNum - 0.05;
            if (this.brighNum <= -1) {
              this.brighNum = -1;
            }
            // console.log(this.brighNum);
          } else if (cX - this.resX > 0) {
            this.brighNum = this.brighNum + 0.05;
            if (this.brighNum >= 1) {
              this.brighNum = 1;
            }
            // console.log(this.brighNum);
          } else {
            this.brighNum = this.brighNum;
          }
          // console.log(this.brighNum);

          if (cY - this.resY < 0) {
            this.contrastNum = this.contrastNum + 0.05;
            if (this.contrastNum >= 1) {
              this.contrastNum = 1;
            }
            // console.log(this.contrastNum);
          } else if (cY - this.resY > 0) {
            this.contrastNum = this.contrastNum - 0.05;
            if (this.contrastNum <= -1) {
              this.contrastNum = -1;
            }
            // console.log(this.contrastNum);
          } else {
            this.contrastNum = this.contrastNum;
          }

          this._canvas
            .draw(this._draw)
            .brightnessContrast(this.brighNum, this.contrastNum)
            .update();
          this.imgElement.src = this._canvas.toDataURL();
          // console.log(this.img_code);

          this.resX = ev.touches[0].clientX;
          this.resY = ev.touches[0].clientY;
        } else{
          
        };
      },

      //操作
      triggerHandleType(index) {
        this.bottomNavAc = index;
        setTimeout(() => {
          if (index != 2) {
            this.drawFlag = false;
            this.bottomNavAc = 0;
          } else {
            this.bottomNavAc = index;
          }
        }, 100);

        var box = document.getElementById("imgBox");
        this.imgElement = box.getElementsByTagName("img")[1];
        this.leftShowIndex = index;
        // this.$refs.imgBox.lastChild.style.pointerEvents = 'auto'
        if (index == 0) {
          //移动
          this.dwv.onChangeTool({
                currentTarget: {
                  value: "ZoomAndPan"
                }
              });
        } else if (index == 1) {
            this.selfNum ++;
            if(this.selfNum  >= 4){
               this.selfNum =0; 
            }
          //旋转
          let json = {
              0:0,
              1:90,
              2:180,
              3:270
          }
        this.dwv.MZYL.setRotate(json[this.selfNum]);

        } else if (index == 2) {
          //  this.$refs.imgBox.lastChild.style.pointerEvents = 'none'
          //左右亮度上下对比度
         this.dwv.onChangeTool({
                currentTarget: {
                  value: "WindowLevel"
                }
              });
        } else if (index == 3) {
          //重置
          
        }
      },

      transformAc(num) {
        if (num == "reset") {
          this.transformAcNum = 0;
        } else {
          if (this.transformAcNum >= 4) {
            this.transformAcNum = 0;
          }
          this.transformAcNum++;
        }
        let transformConfigArr = [
          "rotate(0deg)",
          "rotate(90deg)",
          "rotate(180deg)",
          "rotate(270deg)",
          "rotate(0deg)"
        ];
        this.$refs.imgTransform.style.WebkitTransform =
          transformConfigArr[this.transformAcNum];
      },

      getPhoto(params) {
        HttpService.api({
          url: "/getPhoto",
          params: params,
          headers: {}
        }).then(res => {
          if (res.success) {
            this.getPhotoList = res.result || [];
            if (this.getPhotoList.length) {
              let el = this.$refs.tcSfPathWarpper;
              setTimeout(() => {
                let elChildrenArr = this.$refs.tcSfPath;
                this.setTcSfPathWarpper(el, elChildrenArr.length);
              }, 10);
            }
            this.jpgToBase64(this.getPhotoList[0].TC_IMG_JPG_FIELD);
          }
        });
      },

      /*方法说明
       *@method 方法名
       *@param el 元素节点，num 子级的长度
       *@return  Void
       */
      setTcSfPathWarpper(el, num) {
        let elChildren = 158;
        el.style.width = (elChildren * num / 100 + 0.05 * num).toFixed(2) + 'rem';
      },
      /*方法说明
       *@method 方法名
       *@param data 
       *@return  Void
       */
      setImgPath(data, index) {
        this.drawFlag = false;
        this.bottomNavAc = 0;
        if (index != undefined) {
          this.acImgList = index;
        }
        this.imgPath = 'data:image/png;base64,' + data.getFilePath;
      },

      jpgToBase64(id,index){
         HttpService.api({
              url: "/getPhotoJpg",
              params: {
                imgFileId: id
              },
              headers: {}
            }).then(res=>{
              this.isLoading = true;
              if(res.success){
                 this.setImgPath(res.result,index);
              }
            })
      }
    },
    created() {},
    mounted() {
      this.params = {
        patientid: this.$route.params.patientid,
        studyid: this.$route.params.studyid,
        hospcode: this.$route.params.hospcode,
        hospdomain: this.$route.params.hospdomain
      };
    //   this.getPhoto(this.params); 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323131.dcm'

    this.dwv =  new dwv.App();
    this.dwv.init({
        containerDivId: "dwv",
        fitToWindow: true,
        tools: [
          "ZoomAndPan",
          "WindowLevel",
        ],
        isMobile: true
      });

      this.dwv.loadURLs(['https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323131.dcm']);
    }
  };

</script>
<style lang="scss" scoped>

#dwv{
    width: 100%;
    height: 100%;
     position: relative;
}
.drawDiv{
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
  .electronicFilm_wrapper {
    height: 100%;

    .electronicFilm_content {
      overflow: hidden;
      height: 100%;

      >div:nth-child(1) {
        height: pxToRem(800);
        padding: pxToRem(10) pxToRem(10) pxToRem(43) pxToRem(10);
        box-sizing: border-box;

        img {
          width: 100%;
        }
      }

      .imageBrowsing_content_fixed_warpper {
        height: 24.5%;

        >div:nth-child(1) {
          height: 60%;
          padding-left: pxToRem(3);
          padding: pxToRem(16) 0;
          background: #eaeaea;
          width: 100%;
          overflow-x: auto;

          div {
            height: 100%;
            // width: calc(1.58rem * 8 + 0.24rem);

            div {
              width: pxToRem(138);
              height: 100%;
              float: left;

              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }

        >div:nth-child(2) {
          height: 40%;

          .bottom_nav {
            display: flex;
            height: 100%;

            >div {
              width: pxToRem(188);
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          img {
            width: pxToRem(60);
            height: pxToRem(60);
          }
        }
      }


    }
  }

  #imgMark {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999999;
  }

  .ac {
    background: #e0e0e0;
  }

  .acImg {
    border: 2px solid #469feb;
  }

  #imgBox {
    height: 75%;
  }

  .nav_item.ac {
    background: rgba(0, 0, 0, 0.38);
  }

</style>
